{% extends 'base.html' %}


{% block title %}Datasets{% endblock %}

{% block head %}Datasets{% endblock %}

{% block content %}
<h2 class="mt-4">概况</h2>
<p>当前数据库概况。</p>
<div class="row row-cols-1 row-cols-md-2 mb-3 text-center">
    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm border-primary">
            <div class="card-header py-3 text-white bg-primary border-primary">
                <h4 class="my-0 fw-normal">原始图像</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">{{summary['image_count']}} <small class="text-muted fw-light">张</small></h1>
                <p class="card-text">以图像形式存储的数据。<br>主要包括jpg, png等格式。</p>
                <a class="btn w-40 btn-lg btn-outline-primary" href="/images" role="button">查看</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm border-primary">
            <div class="card-header py-3 text-white bg-primary border-primary">
                <h4 class="my-0 fw-normal">原始视频</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">{{summary['video_count']}} <small class="text-muted fw-light">段</small></h1>
                <p class="card-text">以视频形式存储的数据，<br>主要包括mp4, avi等格式。</p>
                <a class="btn w-40 btn-lg btn-outline-primary" href="/videos" role="button">查看</a>
            </div>
        </div>
    </div>
</div>
<h2 class="mt-4">最近更新</h2>
<p>数据库中最新录入的10条数据。</p>
<div class="row row-cols-1 row-cols-md-2 mb-3">
    <div class="col">
        <table class="table table-striped table-hover caption-bottom">
            <caption>图像</caption>
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">文件名</th>
                </tr>
            </thead>
            {% if images %}
            <tbody>
                {% for image in images %}
                <tr>
                    <th scope="row">{{loop.index}}</th>
                    <td><a href="{{ image['href'] }}"> {{ image['base_name'] }}</a></td>
                </tr>
                {% endfor %}
            </tbody>
            {% else %}
            <p>暂时没有更新。</p>
            {% endif %}
        </table>
    </div>
    <div class="col">
        <table class="table table-striped table-hover caption-bottom">
            <caption>视频</caption>
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">文件名</th>
                </tr>
            </thead>
            <tbody>
                {% if videos %}
                {% for video in videos %}
                <tr>
                    <th scope="row">{{loop.index}}</th>
                    <td>{{ video['base_name'] }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <th></th>
                    <td>暂时没有更新。</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    function autoRefreshPage() {
        window.location = window.location.href;
    }
    setInterval('autoRefreshPage()', 3000);
</script>

{% endblock %}